<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>注册</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
    <style>
        *{margin: 0;padding: 0;}
        body{font:16px/1.5 'Microsoft Yahei';}
        .clearfix:after{content:'';display:block;clear:both;}
        .fl{float:left;}
        .fr{float:right;}
		#register{
			width: 500px;
			background: skyblue;
			margin: 0 auto;
			text-align: center;	
			padding-bottom: 100px;
		}
		h1{
			text-align: center;
			color: #fff;
			background: rgba(0,0,0,0.5);
		}
		label{
			text-align: left;
		}
		input{
			width: 330px;
			height: 35px;
			line-height: 35px;
			padding-left: 8px;
		}
		input::-webkit-input-placeholder{
			
		}
		#register p{
			margin-top: 25px;
			line-height: 35px;
		}
		#register span{
			
			display: none;
		}
		#register p.right span{
			display: block;
			color: green;
		}
		#register p.error span{
			display: block;
			color: red;
		}
		.registerBtn{
			width: 330px;
			height: 35px;
			line-height: 35px;
			background: pink;
			color: #fff;
			font-size: 18px;
			outline: none;
			border: none;
			margin-top: 25px;
		}
    </style>
</head>
<body>
	<div id="register">
		<h1>注册</h1>
		<p>
			<input type="text" name="nickname" id="nickname" class="nickname match" placeholder="请输入用户名">
			<span class="">字母开头,长度5-10位字母数字下划线</span>
		</p>
		 
		<p>
			<input type="password" name="pwd1" id="pwd1" class="pwd1 match" placeholder="请输入密码">
			<span>字母数字长度6-18位</span>
		</p>
		
		<p>
			<input type="password" name="pwd2" id="pwd2" class="pwd2 match" placeholder="请再次输入密码">
			<span>两次密码不一致</span>
		</p>
		
		<p><input type="text" name="phone" id="phone" class="phone match" placeholder="请输入你的手机号"><span>电话号码格式不正确</span></p>
		
		<p><input type="text" name="email" id="email" class="email match" placeholder="请输入你的邮箱"><span>邮箱格式不正确</span></p>
		
		<div class="btn">
			<button class="registerBtn">注册</button>
		</div>
	</div>
</body>
    <script>
        /*  正则:匹配字符串的强大工具
            字符串方法
                match  查找字符串，返回查找结果数组 匹配失败为null;
                search 查找字符串，返回查找字符串首次出现的下标,匹配失败为-1;
                split  分割字符串成数组
                replace(oldval,newval) 匹配oldval字符串，并且替换为newval

            正则：
               直接量: /pattern/modifider
                    pattern 字符串模板
                    modifider 修饰符
        */
//		 var pattern = {
//          'user' : /^[a-zA-Z_]\w{5,10}$/,
//          'pwd' : /^\w{6,18}$/,
//          'qq' : /^[1-9]\d{4,9}$/,
//          'tel' : /^1[345678]\d{9}$/,
//          'mail' : /^([^0][\w]+)@([\w]+)\.([\w]+)$/,
//          'IDCard' : /^[1-9]\d{16}[0-9xX]$/,
//      };
//		
		var pattern {
			'user':/^[a-zA-Z]\w{5,11}$/
		}

        var oInput = document.getElementsByClassName('match');
        var inpReg = ['user' , 'pwd' , '' , 'tel' , 'mail'];
        var oPwd1 = document.getElementsByName('pwd1')[0];
        var oPwd2 = document.getElementsByName('pwd2')[0];
        for (var i=0;i<oInput.length;i++ ){
            oInput[i].i = i;
            oInput[i].onblur = function(){
                var val = this.value;
                console.log(inpReg[this.i])
                if (val){
                    if ( pattern[inpReg[this.i]].test(val) ){
                        this.parentNode.className = 'right';
                    }else{
                        this.parentNode.className = 'error';
                        this.focus();
                    }
                };
            };
        };

        oPwd2.onfocus = function(){
        	console.log(oPwd1.value)
            if ( !oPwd1.value ){
                oPwd1.parentNode.className = 'error';
                setTimeout(function(){
                   oPwd1.parentNode.className = '';
                    oPwd1.focus();
                },1000);
            };
        };
        oPwd2.onblur = function(){
            var val = this.value;
            if ( val ){
                if ( val != oPwd1.value ){
                    oPwd2.parentNode.className = 'error';
                    oPwd1.focus();
                }else{
                    oPwd2.parentNode.className = 'right';
                }
            }
          }
    </script>
</html>
